import { PolylineEdge, PolylineEdgeModel, h  } from "@logicflow/core";

class StraightEdgeView extends PolylineEdge {
  static extendKey = 'StraightEdge';
  getEdge() {
    const {
      strokeWidth,
      stroke,
      strokeDashArray,
    } = this.props.model.getEdgeStyle();
    const { points } = this.props.model;
    const points2 = points.split(' ').map((p) => p.split(',').map(a => Number(a)));
    const [startX, startY] = points2[0];
    let d = `M${startX} ${startY}`;
    for (let i = 1; i < points2.length - 1; i++) {
      const [preX, preY] = points2[i - 1];
      const [currentX, currentY] = points2[i];
      const [nextX, nextY] = points2[i + 1];
      if (currentX === preX && currentY !== preY) {
        const y = currentY;
        d = `${d} L ${currentX} ${y}`;
      }
      if (currentY === preY && currentX !== preX) {
        const x = currentX ;
        d = `${d} L ${x} ${currentY}`;
      }
      d = `${d} Q ${currentX} ${currentY}`;
      if (currentX === nextX && currentY !== nextY) {
        const y = currentY;
        d = `${d} ${currentX} ${y}`;
      }
      if (currentY === nextY && currentX !== nextX) {
        const x = currentX;
        d = `${d} ${x} ${currentY}`;
      }
    }
    const [endX, endY] = points2[points2.length - 1];
    d = `${d} L ${endX - 10} ${endY}`;
    return h(
      'path',
      {
        d,
        strokeWidth,
        stroke,
        fill: 'none',
        strokeDashArray,
      },
    );
  }

  getArrow() {
    const { endPoint } = this.props.model
    return h('circle', {
      cx: endPoint.x - 5,
      cy: endPoint.y + 10,
      r: 4,
      stroke:"#015478",
      fill: 'none'
    })
  }
}

class StraightEdgeModel extends PolylineEdgeModel {
  getEdgeStyle() {
    const style = super.getEdgeStyle();
    style.stroke = '#015478';
    style.strokeWidth = '1'
    style.strokeDasharray = '10 10';
    return style;
  }
}

export default {
  type: "StraightEdge",
  view: StraightEdgeView,
  model: StraightEdgeModel
};